<template>
  <div class="header">
    <div class="header-info-left">
      <img
        v-show="userInfo.img"
        class="am-img-thumbnail am-circle"
        :src="userInfo.img"
      >
      <img
        v-show="!userInfo.img"
        class="am-img-thumbnail am-circle"
        src="/static/img/user.jpg"
      >
    </div>
    <router-link v-show="istrue" to="/user-setting">
      <div class="set">设置</div>
    </router-link>
    <router-link v-show="!istrue" to="/user-balance">
      <div class="set">提现记录</div>
    </router-link>
    <div class="header-info-right">
      <div class="my-info">
        <span class="my-info-span">{{userInfo.name?userInfo.name:'匿名'}}</span>
      </div>
      <div class="my-info">
        <span>ID：{{userInfo.ID}}</span>
      </div>
      <div class="my-info">
        <span>身份：{{userInfo.memberRank}}</span>
      </div>
      <div class="my-info">
        <span>上级：{{userInfo.superior?userInfo.superior:"没有上级"}}</span>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex'
export default {
  name: 'UserHeader',
  props: {
    istrue: {
      default: true
    },
    userInfo: Object
  },
  data () {
    return {
      tokenData: []
    }
  },
  mounted () {
    this.tokenData = JSON.parse(this.token)
  },
  computed: {
    ...mapState(['token'])
  }
}
</script>

<style lang="stylus" scoped>
@import '~styles/mixins.styl'
.header
  position: relative
  background-color: #ec2935
  color: white
  text-align: center
  display: flex
  padding: .6rem 0
  .header-info-left
    width: 33%
    .am-circle
      width: 1.5rem
      height: 1.5rem
      border-radius: 50%
    .am-img-thumbnail
      display: inline-block
      max-width: 1.5rem
      height: 1.5rem
      padding: 0.04rem
      line-height: 1.6
      background-color: #fff
      transition: all 0.2s ease-in-out
  .header-info-right
    flex: 1
    text-align: left
    .my-info
      line-height: 0.4rem
      &:last-of-type
        padding-bottom: 0.35rem
      .my-info-span
        font-size: 0.32rem
        font-weight: bold
  .set
    width: 1.2rem
    height: 0.48rem
    position: absolute
    top: 0.2rem
    right: 0.2rem
    color: white
    border: none
    font-size: 0.26rem
    text-align: right
    vertical-align: middle
</style>
